<template>
  <div>{{ displayValue }}</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch, computed } from "vue";
import { useDictionary } from "@/app/api/dict";
const props = defineProps({
  // 字典值
  value: {
    type: [String, Number],
    default: "",
  },
  // 字典列表
  list: {
    type: Array,
    default: () => [],
  },
  // 字典类型
  type: {
    type: String,
    default: "",
  },
  // 字典名称字段
  name: {
    type: String,
    default: "name",
  }
});

const dataList = ref<any>([]);

// 计算最终显示的值
const displayValue = computed(() => {
  const row = dataList.value.find((item: any) => item.value == props.value);
  return row ? row[props.name] : props.value;
});

// 监听list变化
watch(() => props.list, (val) => {
  if (val.length > 0) {
    setTimeout(() => {
      getList();
    }, 100);
  }
}, { immediate: true });

// 组件挂载时获取数据
onMounted(() => {
  if (props.type) {
    getList();
  }
});

// 获取字典数据
const getList = () => {
  // 如果list有数据，则优先使用list
  if (props.list && props.list.length > 0) {
    dataList.value = props.list;
    return;
  }

  // 如果没有list数据但有type，则使用type查询数据
  if (props.type) {
    useDictionary(props.type).then((res) => {
      if (res.data && res.data.dictionary) {
        dataList.value = res.data.dictionary;
      }
    });
  }
};
</script>